<template>
  <q-btn
    flat
    round
    dense
    :color="color"
    v-throttle
    @click="clickBtn"
    :disable="disable"
    class="iconfont"
    style="min-height: auto; min-width: auto; height: 2em;width: 2em;padding-top: 2px"
    :class="getStyle.icon"
    :style="{'font-size': fontSize + 'px'}"
    v-has="{id: permission}"
  >
    <slot></slot>
    <q-tooltip>{{getStyle.tooltip}}</q-tooltip>
  </q-btn>
</template>

<script>

export default {
  name: 'table-btn',
  props: {
    fontSize: {
      type: String,
      default: '18'
    },
    color: {
      type: String,
      default: 'primary'
    },
    btnType: {
      type: String,
      default: 'detail'
    },
    disable: {
      type: Boolean,
      default: false
    },
    icon: {
      type: String,
      default: ''
    },
    tooltip: {
      type: String,
      default: ''
    },
    tips: {
      type: String,
      default: ''
    }, // 删除提示
    permission: {
      default: null
    }
  },
  computed: {
    getStyle () {
      let style
      switch (this.btnType) {
        case 'submit' :
          style = {
            icon: 'icontubiao-53',
            tooltip: '确认'
          }
          break
        case 'cancel' :
          style = {
            icon: 'icontubiao-52',
            tooltip: '取消'
          }
          break
        case 'detail':
          style = {
            icon: 'icontubiao-28',
            tooltip: '详情'
          }
          break
        case 'edit':
          style = {
            icon: 'icontubiao-12',
            tooltip: '编辑'
          }
          break
        case 'copy':
          style = {
            icon: 'icontubiao4-76',
            tooltip: '复制新建'
          }
          break
        case 'delete':
          style = {
            icon: 'icontubiao-16',
            tooltip: '删除'
          }
          break
        case 'more':
          style = {
            icon: 'icongengduo',
            tooltip: '更多'
          }
          break
        case 'add':
          style = {
            icon: 'icontubiao-39',
            tooltip: '新增'
          }
          break
        default:
          style = {
            icon: this.icon,
            tooltip: this.tooltip
          }
          break
      }
      return style
    }
  },
  methods: {
    clickBtn () {
      if (this.btnType === 'delete' && this.tips !== '') {
        this.$utils.showMessage('icontubiao-28', this.tips, () => {
          this.$emit('click')
        }, true)
      } else {
        this.$emit('click')
      }
    }
  }
}
</script>

<style scoped lang="stylus">
.font-18{
  font-size 18px
}
</style>
